<template>
  <div>
    <JDatePicker />
    <Search @add="add" @search="search" />
    <TodoList :todoList="todoList" @remove="remove" @complete="complete" />
    <Total :total="total" :complete_num="complete_num" />
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, computed } from "vue";
import Search from "./components/Search.vue";
import TodoList from "./components/TodoList.vue";
import Total from "./components/Total.vue";
import JDatePicker from "./components/JDatePicker.vue";

// <video width="800" controls>
//   <source src="../../../public/ai.mp4" type="video/mp4" />
// </video>;

const { todoList } = toRefs(
  reactive({
    todoList: [
      {
        title: "xxx",
        status: "0",
      },
    ],
  })
);

const total = computed({
  get: () => todoList.value.length,
  set: (value) => value.length,
});

const complete_num = computed({
  get: () => todoList.value.filter((item) => item.status === "1").length,
  set: (value) => value.filter((item) => item.status === "1").length,
});

const search = (val) => {
  todoList.value = todoList.value.filter((item) => item.title.includes(val));
};

const add = (val) => {
  todoList.value.push({
    title: val,
    status: "0",
  });
};

const remove = (idx) => {
  todoList.value = todoList.value.filter((_, index) => idx !== index);
};

const complete = (index) => {
  todoList.value[index].status = "1";
};
</script>

<style scoped>
.wrap {
  display: inline-block;
}
</style>
